import React, { Component } from 'react'
import { connect } from 'react-redux'
import { personAdd } from '../../redux/actions/person'

class Person extends Component {

  addPerson = () => {
    const name = this.nameNode.value
    const age = this.ageNode.value
    const personObj = { id: Math.random() * 100, name, age }
    // console.log(personObj);
    this.props.addPer(personObj)

    this.nameNode.value = ''
    this.ageNode.value = ''
  }
  render() {
    console.log(this.props);
    return (
      <div>
        <div>上方组件求和为：{this.props.count}</div>
        <input ref={c => this.nameNode = c} type="text" placeholder='输入名字' />
        <input ref={c => this.ageNode = c} type="text" placeholder='输入年龄' />
        <button onClick={this.addPerson}>添加</button>
        <ul>
          {
            this.props.perArr.map(el => {
              return <li key={el.id}>{el.name}--{el.age}</li>
            })
          }
        </ul>
      </div>
    )
  }
}

// 创建并暴露一个Count的容器组件
export default connect(
  state => ({ perArr: state.personRedux, count: state.countRedux }),  // 映射状态
  {   // 映射操作状态的方法
    addPer: personAdd,
    // jian: minusAction,
    // asyncJia: asyncAction
  }
)(Person)
